<template>
  <div class="indexContainer">
    <HeaderTop ref="header" :title="title" :bg="bg" :color="color">
      <router-link to="/search" class="header_left" slot="left">
        <i class="iconfont icon-search1"></i>
      </router-link>
      <router-link :to="userInfo['_id'] ? '/profile' : '/login'" class="header_right" slot="right">
        <i class="iconfont login" v-if="!userInfo['_id']">登录</i>
        <i class="iconfont login icon-Home_icon_geren" v-else="userInfo['_id']"></i>
      </router-link>
    </HeaderTop>
    <section class="main" ref="main" v-if="index.carousels">
      <div class="main-inner">
        <!-- 轮播图 -->
        <Carousel :carousels="index.carousels"/>
        <div class="one-clear">
          <a href="javascript:;">
            <img src="./images/one-yuan-clear.jpg">
          </a>
        </div>
        <!-- nav -->
        <IndexNav :navs="index.navs" />
        <!-- seckill -->
        <div class="seckill">
          <div class="seckill-inner">
            <div class="seckill-header">
              <a href="javascript:;">
                <div class="seckillImg"></div>
                <span class="sixPoint">{{countdown.hour}}点场</span>
                <div class="countdown">
                  <span>{{countdown.hour}}</span>
                  <span>:</span>
                  <span>{{countdown.minute}}</span>
                  <span>:</span>
                  <span>{{countdown.second}}</span>
                </div>
              </a>
              <a href="javascript:;">
                <span>更多秒杀</span>
                <i class="seckill_more"></i>
              </a>
            </div>
            <div id="wrapper" class="seckill-content">
              <div id="scroller">
                <ul class="content" v-if="index.seckill">
                  <li v-for="(goods, index) in index.seckill.goods" :key="index">
                    <a href="javascript:;">
                      <img :src="goods.pic" >
                      <div class="price">
                        <p class="new-price">
                          <em>￥</em>
                          <span>{{goods.new_sell}}</span>
                        </p>
                        <p class="old-price">
                          <em>￥</em>
                          <span>{{goods.old_sell}}</span>
                        </p>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!-- new-people-->
        <div class="new-people">
          <div class="inner">
            <a href="javascript:;">
              <img src="http://ftp6261168.host107.abeiyun.cn/jd/assets/images/new-people-01.jpg" />
            </a>
            <a href="javascript:;">
              <img src="http://ftp6261168.host107.abeiyun.cn/jd/assets/images/new-people-02.jpg" />
            </a>
          </div>
        </div>
        <!-- courtyard -->
        <div class="courtyard">
          <div class="courtyard-header">
            <img src="http://ftp6261168.host107.abeiyun.cn/jd/assets/images/courtyard/home-courtyard.jpg" alt="">
          </div>
          <div class="courtyard-content">
            <div class="courtyard-content-inner">
              <div class="courtyard-content-top">
                <a class="top-item"
                   href="javascript:;"
                   v-for="(item, index) in courtyard.top" :key="index">
                  <div class="title">
                    <span>{{item.title}}</span>
                    <p>{{item.detail}}</p>
                  </div>
                  <div class="img">
                    <img :src="pic" v-for="(pic, index) in item.pics" :key="index">
                  </div>
                </a>
              </div>
              <div class="courtyard-content-bottom">
                <a class="bottom-item"
                   href="javascript:;"
                   v-for="(item, index) in courtyard.bottom" :key="index">
                  <div class="title">
                    <span>{{item.title}}</span>
                    <p>{{item.detail}}</p>
                  </div>
                  <div class="img">
                    <img :src="item.pic">
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
        <!-- daily-shopping -->
        <div class="daily-shopping">
          <div class="daily-shopping-header">
            <img src="http://ftp6261168.host107.abeiyun.cn/jd/assets/images/daily-shopping/daily-shopping.jpg" alt="">
          </div>
          <div class="daily-shopping-content">
            <div class="daily-shopping-content-inner">
              <a href="javascript:;"
                 class="daily-item"
                 v-for="(item, index) in index.daily_shopping"
                 :key="index">
                <div class="daily-item-title">
                  <span>{{item.title}}</span>
                  <p>{{item.detail}}</p>
                </div>
                <div class="daily-item-img">
                  <img :src="item.pic">
                </div>
              </a>
            </div>
          </div>
        </div>
        <!--recommend -->
        <div class="recommend">
          <div class="recommend-header" v-if="index.recommend">
            <img :src="index.recommend.titlePic" />
          </div>
          <GoodsList :goods="recommendGoods" />
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  // better-scroll
  import BScroll from 'better-scroll'
  // 引入工具模块
  import { countDownFun } from '../../utils/index'
  import HeaderTop from '../../components/HeaderTop/HeaderTop'
  import Carousel from '../../components/Carousel/Carousel'
  import IndexNav from '../../components/IndexNav/IndexNav'
  import GoodsList from '../../components/GoodsList/GoodsList'

  export default {
    name: 'index',
    data () {
      return {
        title: '京东',
        bg: 'transparent',
        color: '#fff',
        courtyard: {
          top: [],
          bottom: []
        }, // 东家小院数据
        countdown: {}, // 倒计时时间
        temp: null // 倒计时定时器
      }
    },
    created () {
      this.timer()
    },
    mounted () {
      this.$store.dispatch('getIndex', (data) => {
        // 东家小院数据
        this.handleCourtyard(this.index.courtyard)
      })
      this.$store.dispatch('getGoods')
    },
    watch: {
      index (value) { // index 中有数据了, 在异步更新界面之前执行
        this.$nextTick(() => {
          this.setMainHeight()
          // main区域下拉滚动
          this._initIScrollMain()
          // 导航左右滑屏
          new BScroll('#wrapper', {
            scrollX: true,
            click: true
          })
        })
      }
    },
    computed: {
      ...mapState(['index', 'goods', 'userInfo']),
      recommendGoods () {
        return this.goods.splice(0, 10)
      }
    },
    components: {
      HeaderTop,
      GoodsList,
      Carousel,
      IndexNav
    },
    methods: {
      handleCourtyard (courtyard) {
        this.courtyard.top = courtyard.slice(0, 2)
        this.courtyard.bottom = courtyard.slice(2, 6)
      },
      _initIScrollMain () {
        this.mainScroll = new BScroll('.main', {
          scrollY: true, // Y轴滚动
          scrollBar: true, // 滚动条
          bounce: false, // 禁用回弹
          probeType: 2
        })
        const header = this.$refs.header.$refs.header
        this.mainScroll.on('scroll', ({x, y}) => {
          if (y <= -10) {
            header.style.backgroundColor = '#e43130'
          } else {
            header.style.backgroundColor = 'transparent'
          }
        })
      },
      // 页面多个定时器, 主要逻辑都在这页面更新
      timer () {
        let nowTime = Date.now() * 1.2
        this.temp = setInterval(() => {
          const { hour, minute, second }= countDownFun(nowTime*1.1)
          this.countdown = {
            hour,
            minute,
            second
          }
        }, 1000)
      },
      setMainHeight () {
        const main = this.$refs.main
        const docH = document.documentElement.clientHeight
        main.style.height = docH - 50 + 'px'
      },
      // 上拉加载更多数据
      loadBottom () {
        setTimeout(() => {
          console.log(this.allLoaded);
          this.allLoaded = true
        }, 2000)
      }
    },
    destroyed () { // 页面销毁需要销毁
      clearInterval(this.temp)
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/mixins.styl";
  .indexContainer
    width 100%
    max-width 1080px
    overflow hidden
    #header
      .header_title
        color(#fff)
    .main
      overflow hidden
      margin-bottom 50px
      .one-clear
        height 1.15rem
        img
          size(100%, 1.15rem)
      .seckill
        padding 10px
        overflow hidden
        border-box()
        bg(#f6f6f6)
        .seckill-inner
          bg(#fff)
          border-radius 8px
          .seckill-header
            height .34rem
            display flex
            justify-content space-between
            a:nth-child(1)
              width 200px
              .seckillImg
                fl()
                size(.69rem, .27rem)
                bgi('./images/seckill.png')
                background-size contain
                margin 8px 6px 0 9px
              .sixPoint
                size(37px, 100%)
                fz(10px)
                color(#333)
                fl()
                lh(34px)
                font-weight bold
              .countdown
                fz(12px)
                fr()
                color(#232326)
                margin-top 7px
                span
                  size(17px, 17px)
                  center-text()
                  display inline-block
                  border 1px solid #f0f0f0
                  line-height 17px
                  &:nth-child(2n)
                    border none
                    width 2px
            a:nth-child(2)
              fz(12px)
              width 64px
              padding-right 10px
              span
                fl()
                color(#f23030)
                lh(34px)
              .seckill_more
                size(12px, 12px)
                fr()
                bgi('./images/seckill-more-icon.png')
                background-size contain
                margin-top: 11px
          .seckill-content
            size(100%, 121px)
            overflow hidden
            #scroller
              width 760px
              .content
                padding 0
                margin 0
                overflow hidden
                li
                  size(76px, 121px)
                  fl()
                  fz(14px)
                  overflow hidden
                  center-text()
                  a
                    border-box()
                    width 100%
                    height 121px
                    padding 5px
                    img
                      size(100%, auto)
                    .price
                      size(100%, 44px)
                      .new-price
                        color(#e93b3d)
                        center(text-x)
                        fz(16px)
                        display block
                        margin 6px 0;
                        em
                          fz(12px)
                          font-style normal
                          font-weight bold
                      .old-price
                        fz(12px)
                        center(text-x)
                        display block
                        text-decoration line-through
                        em
                          fz(10px)
                          font-style normal
      .new-people
        border-box()
        bg(#f6f6f6)
        padding 0 10px
        .inner
          width 100%
          border-radius 8px
          overflow hidden
          img
            width 50%
            fl()
      .courtyard
        bg(#f6f6f6)
        width 100%
        overflow hidden
        .courtyard-header
          bg(#f6f6f6)
          img
            size(100%, .35rem)
        .courtyard-content
          bg(#f6f6f6)
          height 2.4rem
          padding 0 10px
          .courtyard-content-inner
            size(100%, 2.4rem)
            bg(#fff);
            border-radius 8px
            .courtyard-content-top
              size(100%, 50%)
              bottom-border-1px(#f2f2f2)
              .top-item
                fl()
                size(50%, 100%)
                border-box()
                padding-left .1rem
                .title
                  margin-top .1rem
                  height .38rem
                  span
                    fz(.17rem)
                    bg(linear-gradient(90deg, #45CAFF,#1471FB))
                    font-weight bold
                    -webkit-background-clip text
                    color transparent
                  p
                    fz(.12rem)
                    color(#666771)
                    margin-top 6px
                .img
                  border-box()
                  padding 0 .14rem
                  margin-top .06rem
                  img
                    size(.6rem, .6rem)
                    display inline-block
                &:nth-child(1)
                  right-border-1px(#f1f1f1)
            .courtyard-content-bottom
              size(100%, 50%)
              .bottom-item
                fl()
                size(25%, 100%)
                border-box()
                right-border-1px(#f2f2f2)
                padding-left .1rem
                &:nth-child(4)
                  border-right none
                .title
                  margin-top .1rem
                  height .38rem
                  span
                    fz(.17rem)
                    font-weight bold
                    color(#000)
                  p
                    fz(.12rem)
                    color(#666771)
                    margin-top 6px
                .img
                  border-box()
                  padding-left .06rem
                  padding-top .04rem
                  img
                    size(.62rem, .62rem)
                    display inline-block
      .daily-shopping
        width 100%
        overflow hidden
        .daily-shopping-header
          bg(#f6f6f6)
          img
            size(100%, .35rem)
        .daily-shopping-content
          bg(#f6f6f6)
          height 2.4rem
          padding 0 10px
          .daily-shopping-content-inner
            bg(#fff)
            clearFix()
            width: 100%
            border-radius 8px
            .daily-item
              fl()
              size(25%, 100%)
              border-box()
              right-border-1px(#f2f2f2)
              padding-left .1rem
              .daily-item-title
                margin-top .1rem
                height .38rem
                span
                  fz(.17rem)
                  font-weight bold
                  color transparent
                p
                  fz(.14rem)
                  color(#666771)
                  margin-top .04rem
              .daily-item-img
                border-box()
                padding-left .06rem
                padding-top .04rem
                img
                  size(.62rem, .62rem)
                  display inline-block
              &:nth-child(1)
                .daily-item-title
                  span
                    bg(linear-gradient(90deg, #FF2A2A,#F139D2))
                    -webkit-background-clip text
              &:nth-child(2)
                .daily-item-title
                  span
                    bg(linear-gradient(90deg, #FE8537,#F02B2B))
                    -webkit-background-clip text
              &:nth-child(3)
                .daily-item-title
                  span
                    bg(linear-gradient(90deg, #FF765C,#FF23B3))
                    -webkit-background-clip text
              &:nth-child(4)
                .daily-item-title
                  span
                    bg(linear-gradient(90deg, #FF2A00,#FF00AF))
                    -webkit-background-clip text
              &:nth-child(5)
                .daily-item-title
                  span
                    bg(linear-gradient(90deg, #D400FF,#FF320A))
                    -webkit-background-clip text
              &:nth-child(6)
                .daily-item-title
                  span
                    bg(linear-gradient(90deg, #00C2AB,#3E94FF))
                    -webkit-background-clip text
              &:nth-child(7)
                .daily-item-title
                  span
                    bg(linear-gradient(90deg, #FF765C,#FF23B3))
                    -webkit-background-clip text
              &:nth-child(8)
                .daily-item-title
                  span
                    bg(linear-gradient(90deg, #2AD396,#85BB1F))
                    -webkit-background-clip text
      .recommend
        .recommend-header
          bg(#f6f6f6)
          img
            size(100%, .35rem)
</style>
